<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Table 布局</title>
</head>
<body marginheight="0" marginwidth="0">
    <table width="100%" height="950px" style="background-color: darkgray">
        <!-- 所以浏览器都支持 colspan 属性。

          没有浏览器支持 colspan="0"，这个值有特殊的意义。（参见属性值表格中的描述）
          设置单元格可以横跨的列数
        -->
        <tr>
            <!-- <td width="100%" height="10%" style="background-color: aqua" colspan="3">这是头部</td> -->
            <td width="100%" height="10%" style="background-color: aqua" colspan="3">这是头部</td>
        </tr>
        <tr>
            <td align="left" width="20%" height="80%" style="background-color: blue">左菜单
                <ul>
                    <li>iOS</li>
                    <li>android</li>
                    <li>html5</li>
                </ul>
            </td>
            <td align="left" width="60%" height="80%" style="background-color: blueviolet">内容主体</td>
            <td align="left" width="20%" height="80%" style="background-color: deeppink">右菜单</td>
            <!--<td>左菜单</td>-->
            <!--<td>内容主体</td>-->
            <!--<td>右菜单</td>-->
        </tr>
        <tr>
            <td width="100%" height="10%" style="background-color: darkcyan" colspan="3">这是底部</td>
        </tr>
        <!-- 注意如果 设置了 colspan  那么 每个tr 都要对应 不让 中间的 tr 的显示就不正常-->
    </table>
</body>
</html>